<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>12306 出行服务</title>
    <link rel="stylesheet" href="framework/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="framework/reset.css">
    <link rel="stylesheet" href="styles/travel-service.css">
</head>
<body>
    <!-- 总容器 -->
    <div class="wrapper">
        <!-- header部分 -->
        <header class="fixed-header">
            <p>出行服务</p>
        </header>

        <!-- 顶部图片部分 -->
        <div class="top-picture">
            <img src="images/出行服务top.png" alt="">
        </div>

        <!-- 去登录部分 -->
        <div class="to-login">
            <h3>登录查看行程信息</h3>
            <p>关注行程信息 畅享无忧出行</p>
            <div class="button-to-login">
                <button onclick="location.href='login.html'">去登录</button>
            </div>
        </div>

        <!-- 服务类型部分 -->
        <div class="three-service">
            <ul>
                <li class="car-service">
                    <img src="images/约车服务.png" alt="">
                    <a href=""><p>约车服务</p></a>
                </li>
                <li>
                    <img src="images/酒店住宿service.png" alt="">
                    <a href=""><p>酒店住宿</p></a>
                </li>
                <li>
                    <img src="images/铁路商城service.png" alt="">
                    <a href=""><p>铁路商城</p></a>
                </li>
            </ul>
        </div>

        <!-- 广告部分 -->
        <div class="ad">
            <img src="images/出行服务ad.png" alt="">
        </div>
        <!-- 精彩旅程部分 -->
        <p class="good-travel-text">精彩旅程 尽在12306</p>
        <div class="good-travel">
            <img src="images/精彩旅程1.png" alt="">
            <img src="images/精彩旅程2.png" alt="">
            <img src="images/精彩旅程3.png" alt="">
            <img src="images/精彩旅程4.png" alt="">
            <img src="images/精彩旅程5.png" alt="">
            <img src="images/精彩旅程6.png" alt="">
        </div>

        <!-- 底部菜单部分 -->
        <ul class="footer">
            <li class="index" onclick="location.href='index.html'">
                <i class="fa fa-train"></i>
                <p>首页</p>
            </li>
            <li class="travel-service" onclick="location.href='travel-service.html'">
                <i class="fa fa-suitcase"></i>
                <p>出行服务</p>
            </li>
            <li onclick="location.href='order.html'">
                <i class="fa fa-file-text-o"></i>
                <p>订单</p>
            </li>
            <li onclick="location.href='member.html'">
                <i class="fa fa-diamond"></i>
                <p>铁路会员</p>
            </li>
            <li>
                <i class="fa fa-user-o"></i>
                <p>我的</p>
            </li>
        </ul>
    </div>
</body>
</html>